<template>
	<a-modal :visible="visible" width="500px" :title="title[props.data.title]" wrapClassName="a-modal-dialog" centered destroyOnClose @cancel="cancel" :maskClosable="false">
		<div class="center">
			<a-form ref="formRef" :model="modelRef" :rules="certRules" layout="vertical" :label-col="{span: 24}" :wrapper-col="{span: 24}">
				<a-row :gutter="24">
					<a-col :span="24">
						<a-form-item :label="title[props.data.title] + '备注'" htmlFor="label" name="comment">
							<a-textarea v-model:value="modelRef.comment" :placeholder="'请输入' + title[props.data.title] + '备注'" :rows="4" />
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
		</div>

		<template #footer>
			<a-button type="primary" :loading="loading" @click="sendRequest">确定</a-button>
		</template>
	</a-modal>
</template>
<script setup lang="ts">
	import {reactive, ref} from 'vue'
	import {message} from 'ant-design-vue'
	import {setApproval} from '@/api/contract'

	const props = defineProps({
		data: {
			type: Object,
			required: true
		},
		visible: {
			type: Boolean,
			required: true
		}
	})
	const loading = ref(false)
	const modelRef = reactive<any>({
		comment: ''
	})
	const emit = defineEmits(['update:visible', 'success'])
	const cancel = () => {
		emit('update:visible', false)
	}
	const sendRequest = () => {
		let data = {
			comment: modelRef.comment,
			pass: props.data?.title === 0 ? true : false,
			taskId: props.data.taskId
		}
		setApproval(data)
			.then(res => {
				message.success('操作成功')
				emit('success')
				cancel()
			})
			.finally(() => (loading.value = false))
	}
	const certRules = {
		comment: [
			{
				required: true,
				message: '请输入备注'
			}
		]
	}
	const title = reactive<any>(['通过', '驳回', '撤销'])
</script>
<style lang="less">
	.center {
		padding: 10px;
	}
</style>
